<script setup>
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import optionDeptPerson from '@/store/modules/optionDeptPerson'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { addAgentMatter } from '@/api/schedule'

const optionPersonArrId = ref([])
onShow(() => {
  if (optionDeptPerson.state.optionPerson) {
    optionPersonArrId.value = optionDeptPerson.state.optionPerson.map((v) => {
      return {
        userId: v.userId,
        nickName: v.nickName,
        avatar: v.avatar,
      }
    })
  }
	
})
// 选择成员
const optionPerson = () => {
  uni.navigateTo({
    url: '/components/OptionDeptPerson/index?type=person',
  })
}

const leftIcon = () => {
  optionDeptPerson.mutations.clearOptionPerson(optionDeptPerson.state)
}

const handleSave = () => {
	if(title.value === ''){
		uni.showToast({
			title:'请输入内容',
			icon:'none'
		})
	}else{
		addAgentMatter({
		  title: title.value,
		  participants: JSON.stringify(optionPersonArrId.value),
		}).then((res) => {
		  if (res.code === 200) {
		    uni.navigateBack()
		  }
		})
	}

}

const title = ref('')
</script>

<template>
  <HeaderNavTabarVue title="待办" @leftIcon="leftIcon"  />
  <view class="container">
		<view class="textarea-box">
		  <text class="info-list-left isrequired">待办内容</text>
		  <textarea
		    v-model="title"
		    class="textinfo-list"
		    placeholder="请输入待办内容"
		  ></textarea>
		</view>
<!--    <textarea
      v-model="title"
      placeholder="请输入待办内容"
      placeholder-class="placeholder"
      style="width: 100%"
    /> -->
    <view class="participants-container">
      <text class="participants-title">添加参与人</text>
      <view style="display: flex; align-items: center; gap: 16rpx" @tap="optionPerson">
        <view v-if="optionPersonArrId.length === 0" class="participants">请选择</view>
        <view v-else-if="optionPersonArrId.length === 1" class="participants"
          >{{ optionPersonArrId[0].nickName }}
        </view>
				
        <!-- <view v-else class="participants">{{ optionPersonArrId[0].nickName }} 等</view> -->
        <i class="iconfont icon-right-1-copy participants" />
      </view>
    </view>
		<view style="margin-top: 24rpx;color: #86909c;" v-if="optionPersonArrId.length > 1">
			<view  v-for="(item,index) in optionPersonArrId"
				:key="index" class="uni-input">{{ item.nickName }}
				&nbsp
			</view>
		</view>
  </view>
  <view class="button-container">
    <button class="button" @tap="handleSave">保存待办</button>
  </view>
</template>

<style lang="scss" scoped>
@import '@/static/style/index.scss';

.container {
  background-color: #ffffff;
  width: 100%;
  padding: 32rpx;

  .placeholder {
    align-self: stretch;
    color: #86909c;
    font-family: 'PingFang SC';
    font-size: 34rpx;
    font-style: normal;
    font-weight: 500;
    line-height: 47.6rpx;
  }

  .participants-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .participants-title {
    color: #1d2129;
    font-family: 'PingFang SC';
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 44.8rpx;
  }

  .participants {
    color: #86909c;
    font-family: 'PingFang SC';
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 39.2rpx;
  }
}

.button-container {
  position: fixed;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 120rpx;
  align-items: center;
  background: #fff;

  .button {
    width: 100%;
    margin: 0 24rpx 0 24rpx;
    height: 72rpx;
    background: #165dff;
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44.8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 8rpx;
  }
}
.textarea-box {
  background: #fff;
  padding: 20rpx;
  margin-top: 20rpx;

  .info-list-left {
    // @include font-color-auxiliary;
    color: #1d2129;
    font-size: $font-size-base;
  }

  .textinfo-list {
    margin-top: 20rpx;
    width: 100%;
    height: 200rpx;
  }
}
</style>
